<template>
    <div class="button">
      <button type="button" v-show="counts>0" :style="{color:colors ,borderColor: colors}"  @click="reduce">-</button>
      <span v-show="counts>0" :style="{color:colors}">{{counts}}</span>
      <button type="button" @click="addMount" :class="{nomounts: counts < mounts}" :style="{color:colors,borderColor: colors}" >+</button>
    </div>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'add-decrsde',
        props: {
          good: Object,
          color: String
        },
      data () {
          return {
            goods: this.good,
            counts: this.good.counts,
            stocks: this.good.stock,
            mounts: 1,
            colors: this.color
          };
      },
      methods: {
        addMount () {
          if (this.counts <= this.stocks) {
            this.counts++;
            this.stocks--;
            this.$set(this.goods, 'counts', this.counts);
            this.$set(this.goods, 'stock', this.stocks);
            this.$emit('moreSpecificat', this.goods);
          }
        },
        reduce () {
          this.counts--;
          this.stocks++;
          if (this.counts === 0) {
            this.$set(this.goods, 'select', 0);
            this.goods.goodsMounts -= 1;
          }
          this.$set(this.goods, 'counts', this.counts);
          this.$set(this.goods, 'stock', this.stocks);
          this.$emit('moreSpecificat', this.goods);
        }
        }
    };
</script>

<style lang="stylus" scoped>
  .button
   display flex; align-items center; position absolute;right 0
   &>button
     display inline-block; width 25px; height 25px; border-radius 50%; border 1px solid #BDBDBD; text-align center; font-size 17px; color #BDBDBD; line-height 25px; background transparent;padding 0; box-sizing unset;
   &>button.nomounts
     border 1px solid #41B962; background #41B962; color #fff
    &>span
      margin 0 5px;
</style>
